<template>
  <div id="box"> 
    <div class="item" @click="goPage('/home')" :class="{on: '/home' === $route.path}">
      <i class="iconfont icon-shouye"></i>
      <span>首页</span> 
    </div>
    <div class="item" @click="goPage('/search')" :class="{on: '/search' === $route.path}">
      <i class="iconfont icon-wenda1"></i>
      <span>问答</span> 
    </div>
    <div class="item" @click="goPage('/order')" :class="{on: '/order' === $route.path}">
      <i class="iconfont icon-shipin"></i>
      <span>视频</span> 
    </div>
    <div class="item" @click="goPage('/profile')" :class="{on: '/profile' === $route.path}">
      <i class="iconfont icon-geren_hor"></i>
      <span>我的</span> 
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterTab',
  data() {
    return {

    }
  },
  methods: {
    goPage(path) {
      this.$router.replace(path);
    }
  }
}
</script>

<style lang="less" scoped>
  #box {
    width: 100%;
    height: 90px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    text-align: center;
    border-top: 1px solid #ccc;
  }
  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;
    font-size: 14px;
    margin-top: 4px;
  }
  .on {
    color: #409eff;
  }
  .iconfont {
    font-size: 40px;
  }
  .item:hover {
    cursor: pointer;
  }
</style>